<template>
  <div>
    <div class="top">
      <div class="top_public">
         <img class="top_logo" :src="imgUrl+logo" alt />
         <div>{{name}}</div>
      </div>
      <div class="top_public">到期日期:{{expireTime}}</div>
      <div class="topinner">
        <!--<div class="numout">
          <img class="icon" src="../assets/message.png" alt />
          <div class="num">1</div>
        </div>
        <div class="numout">
          <img class="icon" src="../assets/message.png" alt />
          <div class="num">1</div>
        </div>
        <div class="numout">
          <img class="icon" src="../assets/message.png" alt />
          <div class="num">1</div>
        </div>-->
        <el-dropdown trigger="click">
            <div class="users">
              <img class="icon1" src="../assets/user.png" alt />
              <div class="username">{{user_name}}</div>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="jumpInfo">查看信息</el-dropdown-item>
              <el-dropdown-item @click.native="jumpPass">重置密码</el-dropdown-item>
              <el-dropdown-item @click.native="logOut">退出登陆</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
      </div>
    </div>
    <!--<div class="nowLocation">
            当前位置:{{nowLocation}}
    </div>-->
    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
 
<script>
export default {
  name: "app-header",
  data() {
    return {
      nowLocation: "首页",
      imgUrl:this.url,
      logo:'',
      name:'',
      expireTime:'',
      user_name:'',
      editableTabsValue:'0',
      editableTabs: []
    };
  },
  methods: {
    logOut:function(){
      localStorage.removeItem('store_id')
      localStorage.removeItem('user_id')
      localStorage.removeItem('name')
      localStorage.removeItem('logo')
      localStorage.removeItem('expireTime')
      localStorage.removeItem('user_name')
      this.$router.push({ path: "/login" });
    },
    jumpInfo:function(){
      this.$router.push({ path: "/store/info" });
    },
    jumpPass:function(){
      this.$router.push({ path: "/store/pass" });
    },
    removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              this.$router.push({ path: nextTab.path });
              if (nextTab) {
                activeName = nextTab.name;

              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
  },
  created() {
      this.name = localStorage.getItem('name')
      this.logo = localStorage.getItem('logo'),
      this.expireTime = localStorage.getItem('expireTime')
      this.user_name = localStorage.getItem('user_name')
  },
  mounted(){
  
  },
  watch: {
    $route(to, from) {
      return false;
      //this.nowLocation = to.name;
      if(to.fullPath !== '/'){
        var i = ''
        for(var x in this.editableTabs){
          if(this.editableTabs[x]['title'] == to.name){
            var i = this.editableTabs[x]['name']
            break;
          }
        }
        if(i.length > 0){
          this.editableTabsValue = i.toString()
        }else{
          console.log(this.editableTabs)
          var key = (this.editableTabs.length + 1).toString()
          var tab = {title:to.name,name:key,path:to.fullPath}
          this.editableTabs.push(tab);
          this.editableTabsValue = key
        }
        this.$router.push({ path: to.fullPath });
      }
    //this.editableTabsValue = this.editableTabsValue + 1
    //this.nowLocation = this.$route.name;
      //console.log(to.name)
      // console.log(from.path);//从哪来
      // console.log(to.path);//到哪去
    },
  },
};
</script>
<style>
.topinner {
  width:33%;
  display: flex;
  flex-direction:row;
  justify-content:flex-end;
  align-items: center;
}
* {
  margin: 0;
  padding: 0;
}
.top {
  display: flex;
  padding-right: 70px;
  height: 50px;
  border-bottom: 3px solid #e6e6e6;
  align-items: center;
  /*justify-content:flex-end;*/
  flex-direction:row;
}
.icon {
  width: 30px;
  height: 30px;
}
.icon1 {
  width: 25px;
  height: 25px;
}
.nowLocation {
  height: 40px;
  padding-left: 20px;
  line-height: 40px;
  background: #c0c0c0;
  color: #fff;
}
.num {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px;
  font-size: 14px;
  position: absolute;
  top: -2px;
  right: -12px;
}
.numout {
  margin-right: 40px;
  position: relative;
}
.users {
  display: flex;
  flex-direction: column;
  align-items: center;
  height:80%;
  border:none;
}
.username {
  font-size: 13px;
}
.tui {
  /* border-left:1px solid #000; */
  border-bottom: 1px solid #f8f8f8;
  text-align: center;
  display: flex;
  align-items: center;
  height: 30px;
  justify-content: center;
  font-size: 14px;
}
.tuiout {
  width: 150px;
  position: fixed;
  top: 53px;
  right: 20px;
  background: #e6e6e6;
}
.top_public{
  width:33%;
  display:flex;
  flex-direction:row;
  align-items:center;
  height: 50px;
  line-height:50px;
  justify-content:center;
}
.top_logo{
  width:40px;
  height:40px;
  margin-right:10px;
}
</style>